<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>组件的使用</p>
    <button @click="goLogin">toggle</button>
    <p>通过指令控制组件的切换</p>
    <my-component1 v-if="isLogin"></my-component1>
    <my-component2 v-else></my-component2>
    <hr>
    <p>动态组件：通过is属性控制组件的切换。is属性的值就是要显示的组件</p>
    <p>缓存组件：如果组件需要经常切换，就使用keep-alive将组件缓存起来，而不会被销毁。当再次切换回来时，一方面切换较快；另一方面，可以保存数据</p>
    <span>请输入要显示的组件序号：</span>
    <input type="text" @keyup.enter="changeCom" v-model="index">
    <keep-alive>
      <div :is="comName"></div>
    </keep-alive>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          isLogin: false,
          comName: 'my-component1',
          index: 1
        }
      },
      methods: {
        goLogin() {
          this.isLogin = !this.isLogin
        },
        changeCom() {
          this.comName = 'my-component' + this.index
        }
      },
      components: {
        myComponent1: {
          template: `
              <div>
                <p>登录页面</p>
                <span>用户名：</span>
                <input type="text"><br />
                <span>密码：</span>
                <input type="password">
              </div>
          `,
          beforeDestroy() {
            console.log('beforeDestroy');
          },
        },
        myComponent2: {
          template: `
              <div>
                <p>注册页面</p>
                <span>用户名：</span>
                <input type="text"><br />
                <span>密码：</span>
                <input type="password"><br />
                <span>确认密码：</span>
                <input type="password">
              </div>
          `,
          created() {
            console.log(6666);
          },
        },
        myComponent3: {
          template: `
              <div>
                <p>找回密码</p>
                <span>用户名：</span>
                <input type="text"><br />
                <span>手机号：</span>
                <input type="password">
              </div>
          `
        }
      }
    })
  </script>
</body>
</html>